<template>
	<view class="nucleic-top">
		<view class="nucleic-price">
			<image :src="NuatagetData.logo" mode="aspectFill">
			</image>
			<view class="pay-price">
				<text>{{ NuatagetData.name }}</text>
				<text>{{ NuatagetData.price }}</text>
			</view>
		</view>
		<view class="nucleic-hint">
			<view v-for="(item, index) in NuatagetData.boon">
				<icon class="icon-small" type="success" size="15"></icon>
				<text>{{ item }}</text>
			</view>
		</view>
	</view>
	<!-- 地址 -->
	<view class="nucleic-address">
		<view>
			<text>{{ NuatagetData.hospital }}</text>
			<text class="text-color">{{ NuatagetData.address }}</text>
		</view>
		<view @click="makePhoneCall(NuatagetData.phone)">
			<image src="/static/other/dianhua.svg" mode="widthFix"></image>
			<text class="text-color">电话</text>
		</view>
	</view>
	<!-- 表单 -->
	<view class="xinguan-view new-style">
		<view class="xinguan-flex">
			<text>真实姓名</text>
			<input placeholder="请输入真实姓名" placeholder-class="input-style" />
		</view>
		<view class="xinguan-flex">
			<text>手机号</text>
			<input placeholder="请输入手机号" type="number" placeholder-class="input-style" />
		</view>
		<view class="xinguan-flex">
			<text>身份证</text>
			<input placeholder="请输入身份证" placeholder-class="input-style" />
		</view>
	</view>
	<!-- 预约时段 -->
	<view class="nucleic-time">
		<text class="nucleic-Title">选择预约时段</text>
		<scroll-view scroll-x="true" class="scroll-view_H">
			<view class="nucleic-time-flex">
				<view v-for="(item, index) in NuatagetData.date" class="checkstyle" @click="changeTime()">
					<text>{{ item.date }}</text>
					<text>{{ item.week }}</text>
				</view>
				<!-- <view class="checkstyle" @click="changeTime()">
					<text>03-03</text>
					<text>星期五</text>
				</view> -->
			</view>
		</scroll-view>
	</view>
	<!-- 采样方式 -->
	<view class="nucleic-time">
		<text class="sam-Title">咽拭子采样方式</text>
		<view class="sam-content" v-for="(item, index) in NuatagetData.style">
			<label>{{ item.title }}</label>
			<text v-for="(m, i) in item.desc">{{ m }}</text>
		</view>
	</view>
	<!-- 提交 -->
	<view style="height:300rpx"></view>
	<view class="Total-view">
		<text>检测费用：20</text>
		<text @click="Submit">提交</text>
	</view>
	<!-- 骨架屏 -->
	<skIndex v-if="false"></skIndex>
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { ref, reactive, onMounted, toRefs, toRaw } from 'vue'
import { reqNuataget } from "@/serve/api"
import { NuatagetDataType } from '@/types/index';

// 2.定义页面响应式数据
let pageData = reactive({
	NuatagetData: {} as NuatagetDataType
})

// 3.批量解构创建响应式数据
let { NuatagetData } = toRefs(pageData)

// 4.获取核算检测基础数据
onMounted(async () => {
	let { data } = await reqNuataget()
	console.log(data[0])
	pageData.NuatagetData = data[0]
})

// 5.拨打电话
function makePhoneCall(phone: string) {
	uni.makePhoneCall({
		phoneNumber: phone,
		success: res => console.log(res),
		fail: err => console.log(err)
	})
}


</script>
  
  
<style>
/* 表单提交 */
@import url('../../common-style/form.css');
@import url('../../common-style/nucleic-time.css');

page {
	background-color: #fafafa;
}

.nucleic-top {
	background-color: #ffffff;
	padding: 20rpx;
}

.nucleic-price {
	display: flex;
	align-items: center;
}

.nucleic-price image {
	width: 100rpx;
	height: 100rpx;
	display: block;
}

.nucleic-price text {
	display: block;
	padding: 10rpx;
}

.pay-price text:nth-child(1) {
	font-size: 35rpx;
}

.pay-price text:nth-child(2) {
	font-weight: bold;
	color: #ff5f2c;
}

/* 提示 */
.nucleic-hint {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 20rpx;
	font-size: 24rpx;
}

.nucleic-hint view {
	display: flex;
	align-items: center;
}

.nucleic-hint text {
	padding-left: 10rpx;
}

/* 地址 */
.nucleic-address {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 20rpx;
}

.nucleic-address text {
	display: block;
}

.nucleic-address image {
	width: 40rpx;
	height: 40rpx;
}

.nucleic-address view:nth-child(2) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.text-color {
	font-size: 25rpx;
	padding-top: 20rpx;
}

/* 个人信息 */
.new-style {
	margin: 20rpx;
	border-radius: 20rpx;
}

/* 采样 */
.sam-Title {
	font-weight: bold;
}

.sam-content {
	margin-top: 20rpx;
}

.sam-content label {
	background-color: #0176ff;
	color: #ffffff;
	border-radius: 10rpx;
	padding: 5rpx 10rpx;
	font-size: 28rpx;
	display: inline-block;
}

.sam-content text {
	display: block;
	padding: 10rpx 0;
	line-height: 1.5;
	font-size: 28rpx;
}

/* 选中加上样式 */
.checkstyle {
	background-color: #2c76ef !important;
	color: #ffffff !important;
}
</style>
